More Thoughts About State + State Guidelines

Firat Atalay

5 min read

·

Feb 8, 2024

As we finish this first dive into state, I want to share a few more important thoughts, or ideas, about state, as well as some practical guidelines.

So, first of all, there is one important technical detail that you should be aware of, and this might seem obvious but it’s still worth mentioning.

So, what I’m talking about is the fact that each component really has, and manages, its own state. So, even if we render the same component multiple times on one page, each of these component instances will operate independently from all the other ones.

So, in this example, the three counter components all start with a piece of state called “Score,” which is set initially to zero. Then, if one of the buttons is clicked, that increases the score by one for each click, but only in that component. The state in all the other components stays the same.

So, again, if we change the state in one of the components, that won’t affect the other components at all. And so, the same thing, of course, is going to happen when we click one of the other buttons, or even when one of the components is removed from the UI entirely. So, state really is isolated inside of each component.

Now, if we analyze everything that we just learned about state, we can come to the conclusion that we can basically think of the entire application view, so, the entire user interface, as a function of state. Or, in other words, the entire UI is always a representation of all the current states in all components.

And, taking this idea even one step further, a React application is fundamentally all about changing state over time, and of course, also, correctly displaying that state at all times.

And this is really what the declarative approach to building user interfaces is all about. So, instead of viewing a UI as explicit DOM manipulations, with state, we now view a UI as a reflection of data changing over time. And, as you know by now, we describe that reflection of data using state, event handlers, and JSX. So, we describe the UI, React does the rest.

Now, this might all sound a bit philosophical at this point in your journey, but trust me, as you become more and more experienced in building React apps and working with state, you will truly and deeply understand everything I just said here.

Now, okay, and now to finish, let me give you a few guidelines on how to use state in practice. So, practical guidelines is always what students like the most, and here, this also kind of serves as a summary of state in general. And these guidelines are for you to keep as a reference, so, there is a lot of text here that I will just quickly go over now.

So, first of all, you should create a new state variable for any data that a component should keep track of over time. And the easy way of figuring this out is to think of variables that need to change at some point in the future. So, if you’re used to building apps in Vanilla JavaScript, those would be variables defined with “let” or with “var,” or also an array, or object, that you mutate over the applications lifecycle. So, in React, you use state for those.

Another way of figuring out when you need state is this. Whenever you want something in a component to be dynamic, create a piece of state related to that “thing,” and then update the state when the “thing” should change, or, in other words, when you need it to be dynamic.

Now, since this “thing” is a bit abstract, let’s think of a modal window that can be either open or closed. So, for a modal window, we can create a state variable called, “isOpen,” that will keep track of whether the model is currently open or not. Then, when “isOpen” is true, we display the window on the screen, and if it’s false, we hide it. Simple, right? So, whenever you want to change the way a component looks like, or the data that it displays, just update its state, which you usually do inside an event handler function.

Now, when you’re actually building your components, it’s gonna be useful to always imagine the components view, so the component rendered on the screen, as a reflection of state changing and evolving over time.

Finally, there is one common mistake that many beginners make, which is to use state for every single variable that you need in a component, but that’s really not necessary. So, do not use state for variables that should not trigger a re-render, okay? Because that will just cause unnecessary re-renders which can cause performance issues. So, it’s very common to need some variables that are not state. And so for those, you can just use regular variables defined with “const.” But, we will come back to this in the next section.

All right, so this is my first set of guidelines about state, which should be more than enough for now. So, if you truly internalize these, then building React applications in the future should be a lot easier for you. And, I say this because I really believe that mastering state is the most difficult part of learning React, but once you overcome this hurdle and truly internalize when you need state and how it all works, it will unlock React development for you.